<template>
  <a-drawer
    :title="titleMap"
    :width="550"
    :visible.sync="visible"
    :body-style="{ 'padding-top': '0px', paddingBottom: '80px' }"
    @close="close"
  >
    <a-form
      :form="form"
      :label-col="{ span: 5 }"
      :wrapper-col="{ span: 19 }"
      layout="horizontal"
    >
      <a-form-item :label="$t('menu.list.search-list.projects')">
        <a-input
          v-decorator="[
            'appName',
            {
              rules: [
                {
                  required: true,
                  message: $t('user.verification-code.required111566110577212'),
                },
              ],
            },
          ]"
          :placeholder="$t('menu.list.search-list.applications')"
        />
      </a-form-item>
      <!-- app联系人 -->
      <a-form-item :label="$t('menu.profile')" :colon="false" labelAlgin="left">
        <a-select
          :placeholder="$t('menu.profile.basic')"
          allowClear
          v-decorator="[
            'appOwner',
            {
              rules: [
                {
                  required: true,
                  message: $t('user.verification-code.required111566110577213'),
                },
              ],
            },
          ]"
          option-filter-prop="children"
          :disabled="disabled"
          :filterOption="false"
          show-search
          :default-active-first-option="false"
          v-model="inputValue"
          @search="filte1rOption"
          :showArrow="false"
        >
          <a-select-option
            v-for="item in userList"
            :value="item.label"
            :key="item.value"
          >
            {{ item.label }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <!-- app部门 -->
      <a-form-item
        :label="$t('menu.profile.advanced')"
        :colon="false"
        labelAlgin="left"
      >
      <a-input
          v-decorator="[
            'appDepartment',
            {
              rules: [
                {
                  required: true,
                  message: $t('user.login.message-invalid-credentials'),
                },
              ],
            },
          ]"
          :placeholder="$t('user.login.message-invalid-credentials')"
        />
      </a-form-item>
      <a-form-item label="enterprise APP ID">
        <a-input v-decorator="['BmwAppId']" :placeholder="$t('user.v142')" />
      </a-form-item>
      <a-form-item label="Department APP ID">
        <a-input v-decorator="['BbaAppId']" :placeholder="$t('user.v143')" />
      </a-form-item>
      <a-form-item label="Feature ID">
        <a-input v-decorator="['FeatherId']" :placeholder="$t('user.v144')" />
      </a-form-item>
      <a-form-item :label="$t('menu.exception.not-permission')">
        <a-textarea
          v-decorator="['appRemarks']"
          :placeholder="$t('user.verification-code.required1115661812233')"
          :rows="4"
        />
      </a-form-item>
      <a-form-item label="ID" v-if="mode == 1" class="hidden">
        <a-input v-decorator="['id']" />
      </a-form-item>
    </a-form>
    <div
      class="absolute right-0 bottom-0 w-full px-4 py-[10px] bg-white text-left z-1 flex justify-center"
    >
      <a-row class="w-full" :gutter="24">
        <a-col :span="12">
          <a-button
            class="w-full border-none hover:bg-[#3F8CFF] hover:bg-opacity-5 shadow"
            @click="close"
            >{{ $t("app.setting.themecolor.rr") }}</a-button
          >
        </a-col>
        <a-col :span="12">
          <a-button
            :loading="loading"
            class="w-full border-none shadow"
            type="primary"
            @click.native.prevent="submit()"
          >
            <span v-if="!loading">{{ $t("app.setting.themecolor.ss") }}</span>
            <span v-else>{{ $t("app.setting.themecolor.tt") }}...</span>
          </a-button>
        </a-col>
      </a-row>
    </div>
  </a-drawer>
</template>

<script>
import { appIdCreate, appIdChange, appIdDetailList } from "@/api/appid";
import { getUserList, userQuery, userQuery1 } from "@/api/common/form";
import tableSelect from "@/components/tableSelect/tableSelect.vue";

export default {
  components: { tableSelect },
  data() {
    return {
      // 下面这些都是通用的
      form: this.$form.createForm(this),
      visible: false,
      disabled: false,
      loading: false,
      userList: [],
      appList: [],
      // 这个要根据服务修改title
      // titleMap: ['新建数据盘库', '修改数据盘库'],
      titleMap: "",
      mode: 0,
      timerId: "",
      keyword: "",
      inputValue: "",
      inputValue1: "",
    };
  },
  mounted() {},
  watch: {
    async inputValue(value) {
      if (value.length > 2) {
        const { data } = await getUserList({
          UserEmail: value,
          UserName: value,
        });
        this.userList = data;
        // 部门反显
        this.form.setFieldsValue({appDepartment: value.split("/")[1]})
      }
    },
    async inputValue1(value) {
      if (value.length > 2) {
        const { data } = await userQuery1({
          YtAdminDepartment: value,
          types: 2,
        });
        this.appList = data;
      }
    },
  },
  methods: {
    /**
     *
     * @param {*} type 0 新增 1 修改
     * @param {*} data 列表传过来的值
     */
    // 联系人查询async
    async filte1rOption(value) {
      // this.inputValue = value;
      const { data } = await getUserList({
        UserEmail: value,
        UserName: value,
      });
      this.userList = data;
    },
    async filte1rOption1(value) {
      // this.inputValue1 = value;
      const { data } = await userQuery1({
        YtAdminDepartment: value,
        types: 2,
      });
      this.appList = data;
    },
    async open(mode = 0, data = {}) {
      this.mode = mode;
      this.titleMap = this.$t("user.11");
      this.visible = true;

      // 获取用户列表下拉

      // const { data: userList } = await userQuery(1);
      // this.userList = userList

      // 获取App所属部门下拉
      const { data: appList } = await userQuery(2);
      // console.log("appList", appList);
      this.appList = appList;
      // 如果是修改
      if (mode == 1) {
        this.titleMap = this.$t("user.22");
        await this.$nextTick();
        //修改的时候需要给form赋值
        this.form.setFieldsValue({
          appName: data.AppName,
          appOwner: data.AppOwner,
          appDepartment: data.AppDepartment,
          appRemarks: data.AppRemarks,
          id: data.Id,
          FeatherId: data.FeatherId,
          BmwAppId: data.BmwAppId,
          BbaAppId: data.BbaAppId,
        });
      }
    },
    // 提交 通用的
    submit() {
      const {
        form: { validateFields },
      } = this;
      // 按钮loading
      this.loading = true;
      // validateFields 是校验form表单数据
      // force: true 是默认所有字段都校验
      // values 表单的值
      validateFields({ force: true }, async (err, values) => {
        if (!err) {
          try {
            const params = { ...values };
            // 判断状态是新增还是修改 调用不同的api
            this.mode == 0
              ? await appIdCreate({ ...params })
              : await appIdChange({ ...params });
            // 如果成功就调用父页面当前组件的succeed上绑定的事件
            this.$emit("succeed");
            this.$message.success(
              this.$t("user.verification-code.required111566110577308")
            );
            //如果成功就关闭
            this.close();
          } catch (error) {
            console.log("err", error);
            this.$message.error(
              this.$t(
                "user.verification-code.required111566110577371442281431777"
              )
            );
          } finally {
            this.loading = false;
          }
        } else {
          setTimeout(() => {
            this.loading = false;
          }, 600);
        }
      });
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
    // 关闭 通用的
    close() {
      // 修改侧边栏状态
      this.visible = false;
      // 清空form的值
      this.form.resetFields();
    },
  },
};
</script>
